<template>
  <div class="detail-div__base">
    <div class="detail-div__poster flex-item__banshrink">
      <img class="poster-div__picture" :src="foodInfo.image" />
      <i class="icon-arrow_lift poster-i__back" @click="hideSelf"></i>
    </div>
    <div class="detail-div__content flex-item__banshrink">
      <h2 class="detail-h2__title">{{ foodInfo.name }}</h2>
      <p class="detail-p__info">
        <span class="detail-span__info">月售{{ foodInfo.sellCount }}份</span>
        <span class="detial-span__info">好评率{{ foodInfo.rating }}%</span>
      </p>
      <div class="detail-div__price">
        <span class="price-div__curr">￥{{ foodInfo.price }}</span>
        <span class="price-div__pre" v-if="foodInfo.oldPrice"
          >￥{{ foodInfo.oldPrice }}</span
        >
      </div>
      <div class="detail-div__cartbutton" @click="handleCartButtonClick">
        {{ foodInfo.foodCount === 0 ? "加入购物车" : "已添加" }}
      </div>
    </div>
    <gap-comp class="detail-gap__base flex-item__banshrink"></gap-comp>
    <div class="detail-div__scroll" ref="scrollcontent">
      <div class="scroll-div__content">
        <h2 class="scroll-h2__description">商品介绍</h2>
        <p class="scroll-p__description">
          {{ foodInfo.info || foodInfo.description || "商家还在努力写介绍~~" }}
        </p>
        <gap-comp></gap-comp>
        <h2 class="scroll-h2__description">商品评价</h2>
        <div class="scroll-div__buttongroup">
          <div
            class="scroll-div__button button-recommend"
            :class="{ 'button-active': selectButtonStatus.all }"
            @click="handleSelectButtonClick(null)"
          >
            全部
          </div>
          <div
            class="scroll-div__button button-recommend"
            :class="{ 'button-active': selectButtonStatus.recommend }"
            @click="handleSelectButtonClick(0)"
          >
            推荐
          </div>
          <div
            class="scroll-div__button button-notrecommend"
            :class="{ 'button-active': selectButtonStatus.notrecommend }"
            @click="handleSelectButtonClick(1)"
          >
            吐槽
          </div>
        </div>
        <div class="scroll-div__textonly">
          <i
            class="icon-check_circle scroll-i__icon"
            :class="{ 'icon-active': filterDependency.isFilterText }"
            @click="
              filterDependency.isFilterText = !filterDependency.isFilterText
            "
          ></i
          ><span class="scroll-div__text">只看有价值的评价</span>
        </div>
        <ratings-list :ratings="filterUserRatings"></ratings-list>
      </div>
    </div>
    <pop-up :show="isPopUpShow" @click-button="isPopUpShow = false">
      我已经躺在购物车里啦~
    </pop-up>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  reactive,
  PropType,
  watch,
} from "@vue/composition-api";
import Vue from "vue";
import GapComp from "./../gap-comp/gap-comp.vue";
import RatingsList from "./../good-ratlist/good-ratlist.vue";
import PopUp from "./../popup-comp/popup-comp.vue";
import FilterList from "./../../composables/buttonFilter-ratingList";
import FilterEffect from "./../../composables/buttonFilter-eventHandler";
import initBetterScroll from "./../../composables/betterScroll-init";
import { ButtonFilterDependency } from "./../../common/globalType";
import betterScrollRefresh from "../../composables/betterScroll-refresh";
// 食物信息接口
interface FoodInfo {
  description: string;
  foodCount: number;
  icon: string;
  image: string;
  info: string;
  name: string;
  oldPrice: string | number;
  price: number;
  rating: number;
  ratings: Array<UserRating>;
}
// 用户评价接口
interface UserRating {
  avatar: string;
  rateTime: number;
  rateType: number;
  text: string;
  username: string;
}

// 初始化用户评价数组方法
function initUserRatings(originInfo: FoodInfo, ratings: UserRating[]) {
  originInfo.ratings.forEach((rating) => {
    ratings.push(rating);
  });
}
// 定义组件
export default defineComponent({
  props: {
    foodInfo: {
      type: Object as PropType<FoodInfo>,
      required: true,
    },
  },
  // 组件注册
  components: {
    GapComp,
    RatingsList,
    PopUp,
  },
  setup(props, context) {
    // 隐藏自身方法
    const hideSelf = function (this: Vue) {
      this.$emit("good-detail-hide");
    };
    const userRatings = reactive<UserRating[]>([]); // 用户评价数组
    initUserRatings(props.foodInfo, userRatings); // 初始化用户评价数组
    const scrollcontent: Ref<HTMLDivElement | null> = ref(null); // 滚动区块引用
    const BS = initBetterScroll(scrollcontent, { click: true }); // 初始化betterScroll
    // 按钮过滤依赖
    const filterDependency = reactive<ButtonFilterDependency>({
      isFilterText: false,
      currRule: null,
    });
    // 组合函数：提取按钮过滤的副作用，点击事件和按钮选择状态
    const { filterUserRatings } = FilterList(userRatings, filterDependency);
    // 组合函数：提取按钮过滤后数组
    const { handleSelectButtonClick, selectButtonStatus } = FilterEffect(
      filterDependency
    );
    // 观察过滤用户评价数组，当数据更新时刷新BS组件
    watch(filterUserRatings, () => {
      betterScrollRefresh(BS);
    });
    const isPopUpShow: Ref<boolean> = ref(false); // 是否展示弹层组件
    // 处理加入购物车按钮点击事件
    const handleCartButtonClick = function () {
      const foodInfo: FoodInfo = props.foodInfo;
      if (foodInfo.foodCount === 0) {
        // 触发添加食物事件
        context.emit("add-food", foodInfo);
      } else {
        isPopUpShow.value = true;
      }
    };
    return {
      hideSelf,
      scrollcontent,
      filterUserRatings,
      selectButtonStatus,
      filterDependency,
      handleSelectButtonClick,
      handleCartButtonClick,
      isPopUpShow,
    };
  },
});
</script>
<style lang="stylus" scoped>
$cart-height = 48px;
$base-bgc = #fff;
$picture-maxheight = 282px;
$icon-color = #00a0dc;
$food-title-fontsize = 14px;
$food-title-fontweight = 700;
$food-title-color = rgb(7, 17, 27);
$food-title-lineheight = 14px;
$food-info-color = rgb(147, 153, 159);
$food-info-lineheight = 10px;
$food-info-fontsize = 10px;
$text-gap = 12px;
$gap-height = 16px;
$content-maxheight = 75px;
$price-lineheight = 24px;
$price-curr-color = rgb(240, 20, 20);
$main-theme-color = rgb(0, 160, 220);
$cartbutton-borderradius = 12px;
$cartbutton-height = 30px;
$scroll-description-color = rgb(77, 85, 93);
$scroll-description-lineheight = 24px;
$scroll-button-fontsize = 12px;
$scroll-button-radius = 12px;
$scroll-button-deepblue = rgb(0, 160, 220);
$scroll-button-skyblue = rgba(0, 160, 220, 0.2);
$scroll-button-color = rgb(77, 85, 93);
$scroll-button-lineheight = 16px;
$scroll-button-gray = rgba(77, 85, 93, 0.2);
$scroll-linecolor = rgba(7, 17, 27, 0.1);
$textonly-color = rgb(147, 153, 159);
$textonly-icon-fontsize = 24px;
$textonly-icon-lineheight = 26px;
$textonly-text-fontsize = 12px;

.flex-item__banshrink {
  flex: 0 0 auto;
}

.detail-div__base {
  position: fixed;
  background-color: $base-bgc;
  top: 0;
  left: 0;
  bottom: $cart-height;
  width: 100%;
  z-index: 2; // 盖住商品页
  display: flex; // flex
  flex-direction: column;
}

.detail-div__poster {
  position: relative; // 相对定位

  .poster-div__picture {
    display: block;
    width: 100%;
    height: 280px;
    // max-height: $picture-maxheight;
  }

  .poster-i__back {
    position: absolute; // 绝对定位
    padding: 10px;
    color: $icon-color;
    top: 5px;
    left: 0;
  }
}

.detail-div__content {
  margin: 16px;
  text-align: left;
  position: relative; // 相对定位

  .detail-h2__title {
    color: $food-title-color;
    font-size: $food-title-fontsize;
    font-weight: $food-title-fontweight;
    line-height: $food-title-lineheight;
  }

  .detail-p__info {
    padding-top: 8px;
    color: $food-info-color;
    line-height: $food-info-lineheight;
    font-size: $food-info-fontsize;

    &>:first-child {
      padding-right: $text-gap;
    }
  }

  .detail-div__price {
    padding-top: 18px;
    line-height: $price-lineheight;

    .price-div__curr {
      color: $price-curr-color;
      font-weight: $food-title-fontweight;
      font-size: $food-title-fontsize;
    }

    .price-div__pre {
      padding-left: 10px;
      color: $food-info-color;
      font-size: $food-info-fontsize;
      text-decoration: line-through;
    }
  }

  .detail-div__cartbutton {
    position: absolute; // 绝对定位
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    width: 74px;
    height: $cartbutton-height;
    background-color: $main-theme-color;
    color: $base-bgc;
    font-size: $food-info-fontsize;
    border-radius: $cartbutton-borderradius;
    line-height: $cartbutton-height;
    text-align: center;

    &:hover {
      background-color: $scroll-button-skyblue;
    }
  }
}

.detail-div__scroll {
  background-color: #fff;
  // flex-grow 1;
  flex: 1 0 0%;
  overflow: hidden;

  .scroll-div__content {
    // height: 1000px; // 测试
    text-align: left;

    .scroll-h2__description {
      font-weight: $food-title-fontweight;
      font-size: $food-title-fontsize;
      padding: 16px 16px 6px;
    }

    .scroll-p__description {
      padding: 0 24px 18px 24px;
      font-size: $food-info-fontsize;
      color: $scroll-description-color;
      line-height: $scroll-description-lineheight;
    }
  }

  .scroll-div__buttongroup {
    margin: 0 18px;
    padding: 12px 0 18px;
    position: relative; // 相对定位

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: $scroll-linecolor;
    }

    @media (-webkit-device-pixel-ratio: 2), (-webkit-max-device-pixel-ratio: 2), (-webkit-min-pixel-ratio: 2) {
      &::after {
        transform: scaleY(0.5);
      }
    }
  }

  .scroll-div__button {
    font-size: $scroll-button-fontsize;
    line-height: $scroll-button-lineheight;
    display: inline-block;
    padding: 8px 12px;
    margin-right: 8px;
    border-radius: $scroll-button-radius;
    color: $scroll-description-color;
    transition: all 0.5s ease;
  }

  .button-recommend {
    background-color: $scroll-button-skyblue;
  }

  .button-notrecommend {
    background-color: $scroll-button-gray;
  }

  .button-active {
    background-color: $scroll-button-deepblue;
    color: white;
  }

  .scroll-div__textonly {
    padding: 12px 18px;
    border-bottom: 1px solid $scroll-button-gray;
    line-height: $textonly-icon-lineheight;
    color: $textonly-color;

    .scroll-i__icon {
      font-size: $textonly-icon-fontsize;
      padding-right: 4px;
    }

    .icon-active {
      color: $scroll-button-deepblue;
    }

    .scroll-div__text {
      font-size: $textonly-text-fontsize;
      vertical-align: top;
    }
  }
}
</style>
